$(function(){
	var $sliderContainer = $('.slider-container'),
		$sliderImg = $('.slider-img'), 
		$sliderImgLi = $('li', $sliderImg),
		$sliderBtn = $('.slider-btn'),
		$ul = $('.pic-show'),
		imgWidth =  700,
		index = 0,
		timer = null;

	$sliderImg.append($sliderImgLi.eq(0).clone())
				.width(($sliderImgLi.length+1) * imgWidth);

	var sBtns = "";
	for(var i=0; i<$sliderImgLi.length; i++){
		sBtns += '<li></li>';
	}
	$sliderBtn.append(sBtns);

	var $sliderBtnLi = $('li', $sliderBtn);
	$sliderBtnLi.eq(0).addClass('active');

	$sliderBtn.on('mouseover', 'li', function(){
		index = $(this).index();
		switchImg(index);
	});

	$sliderContainer.hover(function(){
		clearInterval(timer);
	}, function(){
		start();
	});

	function start(){
		timer = setInterval(function(){
			if(index == $sliderImgLi.length){
				$sliderImg.css('left', 0);
				index = 0;
			}
			index++;
			switchImg(index);
			
		}, 3000);
	}

	start();


	function switchImg(index){
		for(var i=0; i<$sliderBtnLi.length; i++){
			$sliderBtnLi.eq(i).removeClass('active');
		}
		$sliderBtnLi.eq(index==3?0:index).addClass('active');
		$sliderImg.animate({
			left: -imgWidth*index
		}, 500);
	}

	$('.slider .left').on('click',function(){
		if(index == 0){
			index = 3;
		}
		index--;
		switchImg(index);
	});

	$('.slider .right').on('click',function(){
		index++;
		if(index == 4){
			index = 0;
		}
		switchImg(index);
	});

});